<template>
  <div  :class="isPhone?'':'cascader-container'">
    <!-- 省份选择 -->
    <el-select
      v-model="company"
      :disabled="allDisable||disbleCompany"
      placeholder="请选公司"
      clearable
      filterable
      @change="handlecompanyChange"
      style="width: 200px; margin-right: 10px"
    >
      <el-option
        v-for="item in companys"
        :key="item.company_id"
        :label="item.company_name"
        :value="item.company_id"
      />
    </el-select>

    <!-- 城市选择 -->
    <el-select
      v-if="company&&!justCompany"
      v-model="community"
      :disabled="allDisable"
      placeholder="请选择项目"
      clearable
      filterable
      @change="handlecommunityChange"
      style="width: 200px; margin-right: 10px"
    >
      <el-option
        v-for="item in communitys"
        :key="item.community_id"
        :label="item.community_name"
        :value="item.community_id"
      />
    </el-select>

    <!-- 区县选择 -->
    <el-select
      v-if="community&&!justCompany"
      :disabled="allDisable"
      v-model="department"
      placeholder="请选择部门"
      clearable
      filterable
      style="width: 200px"
      @change="emitEve"
    >
      <el-option
        v-for="item in departments"
        :key="item.department_id"
        :label="item.department_name"
        :value="item.department_id"
      />
    </el-select>
  </div>
</template>

<script>
import api from "@/request/api.js";
export default {
  name: "RegionCascader",
  props: {
    disbleCompany:{
      type:Boolean,
      default: false
    },
    justCompany:{
      type:Boolean,
      default: false
    },
    allDisable:{
      type:Boolean,
      default: false
    },
    
    isPhone: {
      type: Boolean,
      default: false,
    },
    compontentObj: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {
        company_id: "",
        community_id: "",
        department_id: "",
        };
      },
    },
  },
  data() {
    return {
      // 数据存储
      regionData: [],
      // 展示数据
      companys: [],
      communitys: [],
      departments: [],
      // 选中值
      company: "",
      community: "",
      department: "",
    };
  },
  mounted() {
    this.company = this.compontentObj.company_id;
    this.handlecompanyChange(this.company, true);
    this.community = this.compontentObj.community_id;
    this.handlecommunityChange(this.community, true);
    this.department = this.compontentObj.department_id;
    this.loadcompanys();
  },
  methods: {
    // 加载公司数据
    loadcompanys() {
      api.company
        .getCompanyListApi({
          company_id_str: "",
          page: 1,
          search: "",
          size: 999,
        })
        .then((res) => {
          if (res?.status == 200) {
            this.companys.length = 0;
            this.companys.push(...res.data.content.data);
          }
        });
    },
    // 公司变化处理
    handlecompanyChange(val, init = false) {
      if (!init) {
        this.community = "";
        this.communitys = [];
        this.department = "";
        this.departments = [];
      }
      if (!val) {
        this.communitys = [];
        return;
      }
      api.company
        .getCommunityListByCompanyIdApi( val)
        .then((res) => {
          if (res?.status == 200) {
            this.communitys.length = 0;
            this.communitys.push(...res.data.content.data);
          }
        });
      if (!init) {
        this.emitEve();
      }
    },
    // 城市变化处理
    handlecommunityChange(val, init = false) {
      if (!init) {
        this.department = "";
      }
      if (!val) {
        this.departments = [];
        return;
      }
       api.company
        .getDepartmentListApi(this.company, val)
        .then((res) => {
          if (res?.status == 200) {
            this.departments.length = 0;
            this.departments.push(...res.data.content.data);
          }
        });
      if (!init) {
        this.emitEve();
      }
    },
    // 获取完整选择结果
    getSelectedRegion() {
      return {
        company: this.company,
        community: this.community,
        department: this.department,
        companyObj: this.companys.find((item) => item.code === this.company),
        communityObj: this.communitys.find(
          (item) => item.code === this.community
        ),
        departmentObj: this.departments.find(
          (item) => item.code === this.department
        ),
      };
    },
    // 重置选择
    reset() {
      this.company = "";
      this.community = "";
      this.department = "";
      this.communitys = [];
      this.departments = [];
    },
    emitEve() {
      this.$emit("change", {
        company_id: this.company,
        community_id: this.community,
        department_id: this.department,
      });
    },
  },
};
</script>

<style scoped>
.cascader-container {
  display: flex;
  align-items: center;
}
</style>
